<template>
    <div class="" id="todolist">
      <div class="list-header">
          <h2>日志列表</h2>
          <div class="btn-group" role="group" aria-label="...">
              <button type="button" 
                    class="btn btn-default" 
                    :class="{active: type == 'all'}" 
                    @click="type = 'all'">所有日志</button>
              <button type="button" 
                    class="btn btn-default" 
                    :class="{active: type == 'fav'}" 
                    @click="type = 'fav'">收藏日志</button>
          </div>
      </div>
      <div class="list-container">
          <ul class="list-group">
            <li class="list-group-item " 
                v-for="(item, index) in noteList" 
                :key="item.id"  
                @click="activeFn(item)" 
                :class="{active: item == activeNote}">
                <h4 class="list-group-item-heading">{{ item.text }}</h4>
            </li>
          </ul>
      </div>

  </div>
</template>
<script>
export default {
    data(){
        return {
            // 进行日志类型切换的属性
            type: 'all' // 默认状态是所有日志 （type == fav 就是 收藏）
        }
    },
    computed: {
        // 获取所有日志列表
        noteList() {
            // 所有日志
            if (this.type == 'all') {
                return this.$store.state.noteList;
            }
            // 收藏日志
            return this.$store.getters.favNoteList;
            
        },
        // 获取被激活对象
        activeNote() {
            return this.$store.state.activeNote;
        }
    },
    methods: {
        // 激活某个日志对象的方法
        activeFn(item) {
            // console.log(item);
            this.$store.commit('ACTIVE_NOTE', item);
            // console.log(this.$store.state.activeNote);
        }
    }
}
</script>
<style type='text/css'>
#todolist{
    float: left;
    width: 300px;
    height: 100%;
    background-color: #F5F5F5;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}
.list-header{
    width: 100%;
    text-align: center;
}
.list-header h2 {
  font-weight: 300;
  text-transform: uppercase;
  text-align: center;
  font-size: 22px;
  padding-bottom: 8px;
}
.list-header button{
    width:120px;
}
.list-container{
    margin-top:30px;
}
.list-container h4{
    word-break:keep-all;           /* 不换行 */
    white-space:nowrap;          /* 不换行 */
    overflow:hidden;               /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;
}

</style>